<template>
    <div class="box">
        <div class='login-page'>
            <h2>用户登录</h2>
            <div class="form"></div>
            <el-form :model="loginData" label-width="80px">
                <el-form-item>
                    <el-input v-model="loginData.loginAccount" placeholder="手机号" prefix-icon="el-icon-mobile-phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="loginData.password" placeholder="密码" type="password" prefix-icon="el-icon-lock" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="LoginPC">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'

export default {
  name: 'LoginIndex',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      loginData: {
        loginAccount: 'admin',
        password: 'admin'
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async LoginPC () {
      await request({
        url: '/user-basic/login/true',
        method: 'post',
        data: this.loginData
      }).then(res => {
        if (res.data.data !== null) {
          const loginDto = res.data.data
          if (loginDto.isSuccess) {
            const { accessToken, userId } = loginDto
            this.$store.commit('user/setUserInfo', { accessToken, userId })
            this.$router.push('/home')
            this.$message.success(loginDto.message)
            // 登录成功
          } else {
            // 登录失败
            this.$message.error(loginDto.message)
          }
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.box {
  height: 100vh;
  background: url('@/assets/login/login1.jpg') no-repeat center / cover;
  padding-top: 210px;
}
.login-page {
    margin: 0 auto;
    width: 400px;
    height: 320px;
    padding-top: 37px;
    background-color: #fff;
    border-radius: 5px;

    h2 {
        // width: 400px;
        height: 67px;
        // margin-left: -10px;
        text-align: center;
        font-size: 27px;
        font-weight: 400;
    }

    .el-input {
      width: 280px;
      margin-left: -20px;
    }
    .el-button {
      width: 280px;
      margin-left: -20px;
      height: 40px;
      color: #fff;
      border: none;
    }
}
</style>
